<template>
  <div class="frame">
    <el-tabs type="border-card">
      <el-tab-pane label="文章" class="article">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item>状态</el-breadcrumb-item>
          <el-breadcrumb-item
            :to="{
              path: '/AllArticles',
              query: {
                status: 2,
              },
            }"
            >已发布</el-breadcrumb-item
          >
          <el-breadcrumb-item
            :to="{
              path: '/AllArticles',
              query: {
                status: 1,
              },
            }"
            >全部可见</el-breadcrumb-item
          >
          <el-breadcrumb-item
            :to="{
              path: '/AllArticles',
              query: {
                status: 0,
              },
            }"
            >仅我可见</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/Audit' }"
            >审核中</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/Drafts' }"
            >草稿箱</el-breadcrumb-item
          >
          <el-breadcrumb-item :to="{ path: '/RecycleBin' }"
            >回收站</el-breadcrumb-item
          >
        </el-breadcrumb>
        <!-- 时间选择组件 -->
        <div class="block">
          <span class="demonstration"></span>
          <el-date-picker
            v-model="date_value"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="date"
          >
          </el-date-picker>
        </div>
        <!-- 文章类型选择 -->
        <el-select v-model="articleType_value" placeholder="请选择文章类型">
          <el-option
            v-for="item in articleType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <!-- 分类专栏 -->
        <el-select
          v-model="classificationColumn_value"
          placeholder="请选择分类专栏"
        >
          <el-option
            v-for="item in classificationColumn"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-input v-model="keyword" placeholder="请输入关键字"></el-input>
        <el-button type="danger">搜 索</el-button>
        <div class="show">
          <router-view></router-view>
        </div>
      </el-tab-pane>
      <el-tab-pane label="下载">下载</el-tab-pane>
      <el-tab-pane label="问答">问答</el-tab-pane>
      <el-tab-pane label="视频">视频</el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import $ from "jquery";
export default {
  name: "ContentManagement",
  data() {
    return {
      //文章类型
      articleType: [
        {
          value: "选项1",
          label: "不限制类型",
        },
        {
          value: "选项2",
          label: "原创",
        },
        {
          value: "选项3",
          label: "转载",
        },
        {
          value: "选项4",
          label: "翻译",
        },
      ],
      value: "",
      //分类专栏
      classificationColumn: [
        {
          value: "选项1",
          label: "Html",
        },
        {
          value: "选项2",
          label: "Css",
        },
        {
          value: "选项3",
          label: "JavaScript",
        },
        {
          value: "选项4",
          label: "jQuery",
        },
        {
          value: "选项5",
          label: "Vue",
        },
      ],
      //keyword
      keyword: "",
      //分类专栏value
      classificationColumn_value: "",
      //文章类型value
      articleType_value: "",
      //时间value
      date_value: "",
    };
  },
  mounted() {
    $(".el-breadcrumb .el-breadcrumb__inner").click(function () {
      $(this).css("color", "orangered");
      $(this)
        .parent()
        .siblings()
        .children(".el-breadcrumb__inner")
        .css("color", "#303133");
    });
  },
};
</script>

<style lang="less" scoped>
.frame {
  // margin-bottom: 50px;
  padding: 0px;
}
.article {
  .el-breadcrumb {
    margin: 20px 0px;
  }
  .date {
    width: 240px !important;
  }
  .block {
    display: inline-block;
    margin-right: 10px;
  }
  .el-select {
    margin: 0px 10px;
    width: 150px;
  }
  .el-input {
    width: 150px;
    margin: 0px 10px;
  }
  .el-button {
    margin: 0px 10px;
    //   height: 30px;
    padding: 10px;
    width: 80px;
    text-align: center;
  }
  .show {
    width: 100%;
    margin-top: 30px;
    padding-bottom: 30px;
  }
  /deep/.el-breadcrumb__inner.is-link {
    font-weight: 700;
    color: #6d6d66;
    cursor: pointer;
    &:hover {
      color: orangered;
    }
  }
}
</style>